<template>
  <section class="scrollable padder-lg w-f-md" id="bjax-target">
    <h2 class="font-thin m-b">热门歌手 <span class="musicbar inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span>
      <ul class=" pagination pull-right i-xss" style='margin: 0'>
        <li><a><i class="fa fa-chevron-left"></i></a></li>
        <li><a><i class="fa fa-chevron-right"></i></a></li>
      </ul>
    </h2>
    <div class="row row-sm">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for='(item,index) in artists'>
        <div class="item">
          <div class="pos-rlt">
            <div class="bottom">
              <span class="badge bg-info m-l-sm m-b-sm">music:{{item.musicSize}}</span>
            </div>
            <div class="item-overlay opacity r r-2x bg-black" @click="$store.commit('play', {id:item.id,type:'singer'})">
              <div class="text-info padder m-t-sm text-sm">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o text-muted"></i>
              </div>
              <div class="center text-center m-t-n" >
                <a><i class="icon-control-play i-2x"></i></a>
              </div>
              <div class="bottom padder m-b-sm">
                <a class="pull-right">
                  <i class="fa fa-heart-o"></i>
                </a>
                <a>
                  <i class="fa fa-plus-circle"></i>
                </a>
              </div>
            </div>
            <a><img v-lazy="item.img1v1Url" alt="" class="r r-2x img-full"></a>
          </div>
          <div class="padder-v">
            <a class="text-ellipsis">{{item.name}}</a>
            <a class="text-ellipsis text-xs text-muted">专辑：{{item.albumSize}}</a>
          </div>
        </div>
      </div>

    </div>
    <h2 class="font-thin m-b">精品歌单 <span class="musicbar inline m-l-sm" style="width:20px;height:20px">
                    <span class="bar1 a1 bg-primary lter"></span>
                    <span class="bar2 a2 bg-info lt"></span>
                    <span class="bar3 a3 bg-success"></span>
                    <span class="bar4 a4 bg-warning dk"></span>
                    <span class="bar5 a5 bg-danger dker"></span>
                  </span>

      <i class="pull-right icon-refresh i-sm  inline" id="refresh"></i>

    </h2>
    <div class="row row-sm">
      <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for='(item,index) in highquality' :style='index==1? "margin-top:-1px":""'>
        <div class="item">
          <div class="pos-rlt">
            <div class="bottom">
              <span class="badge bg-info m-l-sm m-b-sm"><i class='icon-earphones'></i> &nbsp;{{item.playCount}}</span>
            </div>
            <div class="item-overlay opacity r r-2x bg-black" @click="$store.commit('play', {id:item.id,type:'highquality'})">
              <div class="text-info padder m-t-sm text-sm">
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star"></i>
                <i class="fa fa-star-o text-muted"></i>
              </div>
              <div class="center text-center m-t-n" >
                <a><i class="icon-control-play i-2x"></i></a>
              </div>
              <div class="bottom padder m-b-sm">
                <a class="pull-right">
                  <i class="fa fa-heart-o"></i>
                </a>
                <a>
                  <i class="fa fa-plus-circle"></i>
                </a>
              </div>
            </div>
            <a><img v-lazy="item.coverImgUrl" alt="" class="r r-2x img-full"></a>
          </div>
          <div class="padder-v">
            <a class="text-ellipsis">{{item.name}}</a>
            <a class="text-ellipsis text-xs text-muted">{{item.creator.nickname}}</a>
          </div>
        </div>
      </div>

    </div>
    <div class="row">
      <div class="col-md-8">
        <h3 class="font-thin">每日推荐歌曲</h3>
        <div class="row row-sm">
          <div class="col-xs-4 col-sm-2" v-for='(item,index) in newsongs'>
            <div class="item">
              <div class="pos-rlt">
                <div class="item-overlay opacity r r-2x bg-black" @click="singlePlay(item)">
                  <div class="center text-center m-t-n">
                    <a><i class="fa fa-play-circle i-2x"></i></a>
                  </div>
                </div>
                <a><img v-lazy="item.song.album.picUrl" alt="" class="r r-2x img-full"></a>
              </div>
              <div class="padder-v">
                <a class="text-ellipsis">{{item.name}}</a>
                <a class="text-ellipsis text-xs text-muted">{{item.song.artists[0].name}}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <h3 class="font-thin">Top Songs</h3>
        <div class="list-group bg-white list-group-lg no-bg auto">
          <a class="list-group-item clearfix" v-for='(item,index) in top5' @click="singlePlay(item)">
            <span class="pull-right h2 text-muted m-l">{{index+1}}</span>
            <span class="pull-left thumb-sm avatar m-r">
            <img v-lazy="item.album.picUrl" alt="..."></span>
            <span class="clear">
                <span>{{item.name}}-({{item.album.name}})</span>
                   <small class="text-muted clear text-ellipsis">{{item.artists[0].name}}</small>
                </span>
          </a>
        </div>
      </div>
    </div>
    <div class="row m-t-lg m-b-lg">
      <div class="col-sm-6">
        <div class="bg-primary wrapper-md r">
          <a href="http://blog.csdn.net/zm06201118/">
            <span class="h4 m-b-xs block"><i class="fa fa-bold"></i>&nbsp;&nbsp;http://blog.csdn.net/zm06201118/</span>
            <span class="text-muted">欢迎点击我的博客</span>
          </a>
        </div>
      </div>
      <div class="col-sm-6">
        <div class="bg-black wrapper-md r">
          <a href="https://git.oschina.net/mjt1118/vue-meizhi">
            <span class="h4 m-b-xs block"><i class="fa fa-maxcdn"></i>&nbsp;&nbsp;https://git.oschina.net/mjt1118/vue-meizhi</span>
            <span class="text-muted">码云地址，喜欢的话给我Star</span>
          </a>
        </div>
      </div>
    </div>
    <loading v-show='active'></loading>
  </section>

</template>

<script>
  import {mapActions, mapGetters} from 'Vuex'
  import loading from '../loading/loading.vue'
  export default {
    components:{loading},
    data() {
      return {
        highquality: {},  //精品歌单
        artists: {},   //热门歌手
        newsongs: {},  //每日推荐新歌
        active:false
      }
    },
    mounted() {
      this.getArtists();
    },
    methods: {
      gethighquality() {
        var vm = this;
        this.$http.get('/top/playlist?limit=12').then(function (res) {
          vm.highquality = res.data.playlists;
          vm.getNewsongs();
        })
      },
      getArtists() {
        var vm = this;
        vm.active=true;
        this.$http.get('/top/artists?offset=0&limit=18').then(function (res) {
          vm.artists = res.data.artists;
          vm.$store.commit('fetchData',{url: '/top/list?idx=1'})
          vm.gethighquality();
          vm.active=false;
        })
      },
      getNewsongs() {
        var vm = this;
        this.$http.get('/personalized/newsong').then(function (res) {
//          console.log(res.data)
          vm.newsongs = res.data.result;
        })
      },
      singlePlay(item) {
        let singleState={
          id:item.id,
          name:item.name,
          album:item.song? item.song.album.name:item.album.name,
          singer:item.song? item.song.artists[0].name:item.artists[0].name,
          singerPic:item.song? item.song.album.picUrl:item.album.picUrl,
        }
        this.$store.commit('singlePlay',{single:singleState,type:'single'})
      }
    }
    ,
    computed: mapGetters([  //变量
      'uid',
      'data',
      'recommendSongs',
      'top5'
    ]),
  }
</script>
<style>

</style>
